<template>
  <el-dialog v-model="open" :title="title" width="800px" append-to-body :close-on-click-modal="false">
    <el-form ref="dialogRef" :model="form" :rules="rules" label-width="100px">
      <el-form-item label="场地序号" prop="orderIndex">
        <el-input v-model="form.orderIndex" type="number" placeholder="请输入场地序号" />
      </el-form-item>
      <el-form-item label="场地名称" prop="name">
        <el-input v-model="form.name" placeholder="请输入场地名称" />
      </el-form-item>
      <el-form-item label="是否联动场地">
        <el-radio v-model="form.linkFlag" label="1">是</el-radio>
        <el-radio v-model="form.linkFlag" label="0">否</el-radio>
      </el-form-item>
      <el-form-item v-if="form.linkFlag==1" label="是否父级场地">
        <el-radio v-model="form.isParent" label="1">是</el-radio>
        <el-radio v-model="form.isParent" label="0">否</el-radio>
      </el-form-item>
      <el-form-item v-if="form.linkFlag==1 && form.isParent==0" label="父级场地" prop="parentId">
        <el-select v-model="form.parentId" placeholder="请选择">
          <el-option v-for="item in parentList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="起订时间" prop="minReserveTime">
        <el-select v-model="form.minReserveTime" placeholder="请选择">
          <el-option label="半小时" value="0" />
          <el-option label="1小时" value="1" />
          <el-option label="2小时" value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="所属项目" prop="projectId">
        <el-select v-model="form.projectId" placeholder="请选择">
          <el-option v-for="item in props.projectList" :key="item.id" :label="item.projectName" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-radio v-model="form.status" label="1">启用</el-radio>
        <el-radio v-model="form.status" label="0">禁用</el-radio>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitForm">保 存</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { getCurrentInstance, reactive } from '@vue/runtime-core'
import { watch } from 'vue'
import { toRefs } from '@vueuse/shared'
import { siteEdit, topList } from '../../../../../../api/ven'
import useUserStore from '../../../../../../store/modules/user'


const { proxy } = getCurrentInstance()

const props = defineProps({
  props: {
    type: Object,
    default: () => ({
      open: false,
      title: ''
    })
  },
  projectList: {
    type: Array,
    default: () => []
  }
})
const emit = defineEmits(['submitForm'])

const formBase = {
  linkFlag: '0',
  isParent: '1',
  status: '1'
}
const data = reactive({
  form: {
    ...formBase
  },
  rules: {
    orderIndex: { required: true, message: '必填', trigger: 'blur' },
    name: { required: true, message: '请输入场地名称', trigger: 'blur' },
    parentId: {
      validator: (rule, value, callback) => {
        if (form.value.linkFlag == '1' && form.value.isParent == '0' && !value) {
          callback('必填')
        } else {
          callback()
        }
      }, required: true, trigger: 'change' },
    minReserveTime: { required: true, message: '必填', trigger: 'change' },
    projectId: { required: true, message: '必填', trigger: 'change' }
  },
  parentList: []
})
const { open, title } = toRefs(props.props)
const { form, rules, parentList } = toRefs(data)

watch(open, (val) => {
  if (val) {
    form.value = props.props.data || { ...formBase }
    if (form.value.parentId) {
      form.value.isParent = '0'
    } else {
      form.value.isParent = '1'
    }
  } else {
    proxy.resetForm('dialogRef')
  }
})

watch(() => form.value.isParent, (val) => {
  if (val == '0') {
    if (parentList.value.length == 0) {
      topList().then((res) => {
        parentList.value = res.rows
      })
    }
  }
})

function submitForm() {
  proxy.$refs['dialogRef'].validate((valid) => {
    if (valid) {
      if (form.value.linkFlag == '0' || form.value.isParent == '1') {
        form.value.parentId = 0
      }

      form.value.venueId = useUserStore().user.venueId
      siteEdit(form.value).then(() => {
        proxy.$modal.msgSuccess('操作成功')
        open.value = false
        emit('submitForm')
      })
    } else {
      proxy.$modal.msgError('请完善信息')
    }
  })
}

function cancel() {
  open.value = false
}

</script>

<style scoped>

</style>
